<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }

        .red {
            color: red;
        }

        .blue {
            color: blue;
        }

        .yellow {
            color: yellow;
        }

        .bold {
            font-weight: bold;
        }

        .italic {
            font-style: italic;
        }

        .underline {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <!-- vue没有绑定id的，也不会绑定元素 -->
    <div>{{message}}</div>
    <div id="app">
        <!-- {{}}双大括号语法：Mustache语法：胡子/胡须，只能绑定到内容(contend)里面 -->
        <div>{{message}}</div>
        <div>{{firstName+lastName}}</div>
        <div>{{firstName+' '+lastName}}</div>
        <div>{{firstName}} {{lastName}}</div>
        <div>计数器*2：{{counter*2}}</div>
        <ul>
            <!-- 数组遍历：(子项,下标) in 数组 -->
            <li v-for="(item,index) in movies">{{index}}-{{item}}</li>
        </ul>
        <div>
            <span>计数器：{{counter}}</span>
            <!-- v-on:监听xx事件，click点击事件，内部可以直接写执行的代码，也可以直接写函数名 -->
            <button v-on:click="counter--">-</button>
            <!-- @click是v-on:click的方法糖 -->
            <button @click="add">+</button>
            <!-- v-once数据只初始化，后续操作不会改变 -->
            <span v-once>计数器初始值：{{counter}}</span>
        </div>
        <div>
            <p>{{url}}</p>
            <!-- v-pre不解析{{}}，很少使用 -->
            <p v-pre>{{url}}</p>
            <!-- v-text不解析html标签，会覆盖掉当前标签的内容，很少使用，推荐使用{{}} -->
            <p v-text="url">该内容会被覆盖</p>
            <!-- v-html可以解析html标签 -->
            <p v-html="url"></p>
        </div>
        <div>
            <!-- v-bind绑定属性，:是语法糖 -->
            <img v-bind:src="imgUrl" :alt="imgAlt">
        </div>
        <div>
            <p class="red">class直接显示红色</p>
            <p :class="redFont">:class绑定红色</p>
            <p>
                <!-- {key1:value1, key2:value2}一对大括号代表对象 -->
                <span class="underline" :class="{blue:isBlue,italic:isItalic}">对象动态绑定class</span>
                <!-- 可以换成方法获取对象，要加上() -->
                <span class="underline" :class="getClasses()">对象动态绑定class</span>
                <button @click="blueClick">蓝色</button>
                <button @click="italicClick">倾斜</button>
                <!-- 数组语法，很少使用 -->
                <span class="underline" :class="[blueFont,italicFont]">数组静态绑定class</span>
                <!-- 加上单引号表示字符串，不加表示变量 -->
                <span class="underline" :class="['blue','italic']">数组静态绑定class</span>
            </p>
        </div>
        <div>
            <!-- fontSize属性名要使用驼峰形式 -->
            <p :style="{fontSize: fontSize50+'px'}">对象动态绑定style</p>
            <p :style="[fontObj,colorObj]">对象数组动态绑定style</p>
        </div>
    </div>
    <div id="cloak" v-cloak>
        v-cloak斗篷，该元素渲染完成后，会把v-cloak标签删除掉，配合style的[v-cloak]{display: none;}隐藏效果，可以实现：
        加载成功之前不显示该元素内容。
        配合脚手架后，就不再使用这个。
    </div>
    <script>
        const app = new Vue({
            el: '#app',//绑定元素的id
            data: {//绑定的内容
                message: 'Hello Vue.js',//字符串
                movies: ['aaa', 'bbb', 'ccc', 'ddd'],//数组
                counter: 100,//计数器
                firstName: 'C',
                lastName: 'K',
                url: '<a href="https://www.baidu.com" target="_blank">百度一下</a>',
                imgUrl: 'img/app/springBoot.png',
                imgAlt: '图片',
                redFont: 'red',
                blueFont: 'blue',
                yellowFont: 'yellow',
                boldFont: 'bold',
                italicFont: 'italic',
                isBlue: true,
                isItalic: true,
                fontSize50: 50,
                fontObj: { fontSize: '40px' },
                colorObj: { color: 'red' }
            },
            methods: {//绑定的方法
                add: function () {//计数器增加的方法
                    // 使用当前对象的变量要加this.
                    this.counter++;
                },
                blueClick: function () {
                    this.isBlue = !this.isBlue;
                },
                italicClick: function () {
                    this.isItalic = !this.isItalic;
                },
                getClasses: function () {
                    return { blue: this.isBlue, italic: this.isItalic }
                }
            },
        });
        setTimeout(function () {
            const cloak = new Vue({
                el: '#cloak'
            })
        }, 1000);
    </script>
</body>

</html>